<template>
  <div>
    <div>加载外部三维模型二</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls, GLTFLoader } from 'three/addons';
  // import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(500, 500, 500);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    // console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);
    // const pointLight = new THREE.PointLight();
    // pointLight.position.set(100, 100, 100);
    // scene.add(pointLight);
    // const pointLightHelper = new THREE.PointLightHelper(pointLight);
    // scene.add(pointLightHelper);

    //纹理贴图加载器TextureLoader
    const texLoader = new THREE.TextureLoader();
    const texture = texLoader.load('/public/38.png');
    texture.colorSpace = THREE.SRGBColorSpace; //设置为SRGB颜色空间
    //   texture.flipY = true;
    console.log('texture', texture);

    const material = new THREE.MeshBasicMaterial({
      color: 0xffff1f,
      // 设置纹理贴图：Texture对象作为材质map属性的属性值
      // map: texture, //map表示材质的颜色贴图属性
      side: THREE.DoubleSide,
    });
    const materialone = new THREE.MeshBasicMaterial({
      map: texture,
    });

    const materialMesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200), materialone);
    scene.add(materialMesh);

    const loader = new GLTFLoader();
    // const dracoLoader = new DRACOLoader();
    // dracoLoader.setDecoderPath('/examples/jsm/libs/draco/');
    // loader.setDRACOLoader(dracoLoader);
    // console.log('loader', loader);
    loader.load(
      '../../../../public/feiji.gltf',
      function (gltf) {
        console.log('控制台查看加载gltf文件返回的对象结构', gltf);
        // console.log("gltf对象场景属性", gltf.scene);
        gltf.scene.traverse((obj: any) => {
          console.log('obj', obj);

          if (obj.isMesh) {
            // console.log('模型节点名字', obj.name);
            obj.position.set(200, 100, 0);
            // obj.rotation.set(Math.PI, 0, 0);
            obj.material = material;
          }
        });

        // 返回的场景对象gltf.scene插入到threejs场景中
        scene.add(gltf.scene);
      },
      () => {},
      (err) => {
        console.log('errpr', err);
      },
    );

    function renderFun() {
      // console.log('asdfasdf');
      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
